<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成绩导出</title>
  <link href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/style.css" rel="stylesheet">
  <style>
    .container {
      padding-left: 40px;
      padding-right: 40px;
    }

    .container form.row {
      padding: 15px;
    }

    .container .row h2 {
      text-align: center;
    }

    .container .row h2+.col-xs-4 button[type=button] {
      margin: 15px 10px;
      display: inline-block !important;
      box-sizing: border-box !important;
    }
  </style>
</head>

<body>
  <div class="shadow-box"></div>
  <div class="container">
    <div class="row">
      <h2 class="col-xs-8">2019-2020-1 学期 计算机基础 课程成绩</h2>
      <div class="col-xs-4">
        <button type="button" class="btn btn-default col-xs-4">导出</button>
        <button type="button" class="btn btn-default col-xs-4">返回</button>
      </div>
    </div>
    <div class="row">
      <table class="table table-bordered table-hover">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>学号</th>
          <th>专业</th>
          <th>年级</th>
          <th>班级</th>
          <th>平时成绩</th>
          <th>实验成绩</th>
          <th>考试成绩</th>
          <th>实践成绩</th>
          <th>总成绩</th>
        </tr>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>2018030103</td>
          <td>计算机应用</td>
          <td>2018</td>
          <td>20180301</td>
          <td>90</td>
          <td>85</td>
          <td>85</td>
          <td>90</td>
          <td>92</td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    let tbody = document.querySelector('table tbody');
    for (let i = 0; i < 8; i++) {
      let tr = document.querySelectorAll('table tr')[1].cloneNode(true);
      tbody.appendChild(tr)
    }
  </script>
</body>

</html>